<template>
	<view class="container">
		<image :src="bannerUrl" mode="" class="banner"></image>
		<u-sticky>
			<u-tabs 
				:list="tablist" 
				active-color="#19be6b" 
				:is-scroll="false" 
				:current="current" 
				height="90"
				bar-width="60"
				bg-color="#f7f7f7"
				@change="change"
			></u-tabs>
		</u-sticky>
		<view class="news" v-if="current == 0">
			<view class="news_body">
				<view class="news_item" @click="pageTo(item.id)" v-for="(item, index) in kepuList" :key="index">
					<view class="item_txt">
						<view class="">
							<text class="title">{{ item.title }}</text>
							<text class="desc">{{ item.description }}</text>
						</view>
						<text class="time">{{ item.createtime_text }}</text>
					</view>
					<view class="item_img">
						<image :src="item.imageUrl" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="peixun" v-if="current == 1">
			<view class="peixun_item" v-for="(item,index) in peixunlist" :key="index">
				<image :src="item.imageUrl" mode=""></image>
				<text class="title">{{ item.title }}</text>
				<view class="des">
					<text>浏览: {{ item.views }}</text>
					<text class="btn" @click="train(item.id)">立即咨询</text>
				</view>
			</view>
		</view>
		<view class="nomore">
			<u-loadmore :status="Status" />
		</view>
	</view>
</template>

<script>
	import { kepuList, RecommendBanner, peixunList } from '../../api/api'
	export default {
		data() {
			return {
				tablist: [{
					name: '养生科普'
				}, {
					name: '培训取证'
				}],
				current: '0',
				kepuList: [],
				Status: 'loading',
				pageIndex: 1,
				bannerUrl: '',
				peixunlist: []
			};
		},
		watch: {
			current(val) {
				this.pageIndex = 1
				this.Status = 'loading';
				switch(val) {
					case '0': 
						this.kepuList = []
						this.getKepuList();
						break;
					case '1': 
						this.peixunlist = []
						this.getPeixunlist()
						break;
				}
			}
		},
		onLoad(options) {
			if(options.cur) this.current = options.cur
			this.getKepuList()
			this.getBanner()
		},
		
		methods: {
			// 获取banner
			getBanner () {
				RecommendBanner({ id: 16 }).then(res => {
					if(res.code == 1) {
						this.bannerUrl = res.data[0].imageUrl
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 获取科普列表
			getKepuList () {
				if(this.Status == 'nomore') return;
				kepuList({ page: this.pageIndex, limit: 10 }).then(res => {
					if (res.code == 1) {
						if(res.data.length == 0) {
							this.Status = 'nomore'
							return
						}
						if(res.data.length < 10) {
							this.Status = 'nomore'
						}
						this.kepuList.push(...res.data)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 培训取证列表
			getPeixunlist() {
				if(this.Status == 'nomore') return;
				peixunList({ page: this.pageIndex, limit: 10 }).then(res => {
					if (res.code == 1) {
						if(res.data.length == 0) {
							this.Status = 'nomore'
							return
						}
						if(res.data.length < 10) {
							this.Status = 'nomore'
						}
						this.peixunlist.push(...res.data)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			change(index) {
				this.current = index + '';
			},
			// 立即咨询
			train(id) {
				uni.navigateTo({
					url: `./train?id=${id}`
				})
			},
			// 科普消息详情页
			pageTo(id) {
				uni.navigateTo({
					url: `./kepu_detail?id=${id}`
				})
			}
		},
		onReachBottom() {
			this.pageIndex++;
			switch(this.current) {
				case '0': 
					this.getKepuList()
					break;
				case '1': 
					this.getPeixunlist();
					break;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	.banner {
		width: 100%;
		height: 175rpx;
	}
	.news {
		width: 100%;
		background-color: #fff;
		padding: 0 25rpx;

		.news_header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 30rpx 0;

			text {
				position: relative;
				font-size: 32rpx;
				font-weight: 700;
				padding-left: 30rpx;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 8rpx;
					height: 100%;
					border-radius: 4rpx;
					background-color: #4CD964;
				}
			}
		}

		.news_body {
			width: 100%;

			.news_item {
				display: flex;
				align-items: center;
				width: 100%;
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;

				.item_txt {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 100%;

					.title {
						display: block;
						width: 500rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 32rpx;
						margin-bottom: 10rpx;
					}

					.desc {
						display: block;
						width: 500rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
						color: #999;
					}

					.time {
						color: #999;
						margin-top: 10rpx;
					}
				}

				.item_img {
					width: 160rpx;
					height: 120rpx;

					image {
						width: 160rpx;
						height: 120rpx;
						border-radius: 8rpx;
					}
				}
			}
		}
	}
	.peixun {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		line-height: 50rpx;
		text-align: justify;
		.peixun_item {
			position: relative;
			width: 48%;
			margin-bottom: 30rpx;
			box-shadow: 0 0 10rpx 5rpx #e8e8e8;
			border-radius: 8rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 320rpx;
			}
			.title {
				display: block;
				width: 100%;
				padding: 0 0 0 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.des {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				width: 100%;
				padding: 0 20rpx 10rpx;
				color: #999;
				.btn {
					padding: 0 15rpx;
					background-color: #4CD964;
					color: #fff;
					border-radius: 30rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	.nomore {
		background-color: #fff;
		padding: 30rpx 0;
	}
</style>
